<template>
  <view class="hide">
    <view class="card">
      <view
        class="view"
        v-for="(item, index) in dataList"
        :key="index"
        @click="select = index"
      >
        <image :src="select === index ? aa : bb" mode=""></image>
        <text>{{ item.title }}</text>
      </view>
      <view class="textarea">
        <textarea
          placeholder="请输入其它原因"
          placeholder-class="place"
          v-model="cancel_reason"
        ></textarea>
      </view>
    </view>
    <view class="tips">
      温馨提示
      <text>
        1.技师未接单全额退款，资金原路返回，预计2-3个工作日到账；<br />
        2.技师已接单出发，车费不予退还；<br />
        3.技师已到达，因客户原因提前终止服务的，除车费外还需扣除项目费的50%；<br />
        4.技师已开始服务后，客户不可以取消订单。</text
      >
    </view>
    <view class="btn" @click="submit"> 提交 </view>
  </view>
</template>

<script>
import aa from "../static/image/1.png";
import bb from "../static/image/0.png";
export default {
  data() {
    return {
      dataList: [
        {
          title: "临时有事",
        },
        {
          title: "地址信息填写有误",
        },
        {
          title: "技师未按时服务",
        },
        {
          title: "其他",
        },
      ],
      select: null,
      cancel_reason: "",
      order_sn: "",
    };
  },
  onLoad(options) {
    this.order_sn = options.order_sn;
  },
  methods: {
    submit() {
      if (this.select === null) {
        uni.showToast({
          icon: "none",
          title: "请选择取消原因",
        });
        return;
      }

      if (this.select === 3 && !this.cancel_reason) {
        uni.showToast({
          icon: "none",
          title: "请输入取消原因",
        });
        return;
      }

      uni.showModal({
        content: "是否确认取消订单？如果技师已经接单，会扣除一定费用",
        success: (res) => {
          if (res.confirm) {
            this.$http
              .post("api/order/cancelOrder", {
                order_sn: this.order_sn,
              })
              .then((res) => {
                this.$http
                  .post("api/order/confirmCancel", {
                    order_sn: this.order_sn,
                    cancel_reason:
                      this.select === 3
                        ? this.cancel_reason
                        : this.dataList[this.select].title,
                  })
                  .then((res) => {
                    uni.showToast({
                      icon: "none",
                      title: "取消成功",
                    });
                  });
                uni.$emit("update", { msg: "页面更新" });
                setTimeout(() => {
                  uni.navigateBack({
                    delta: 1,
                  });
                }, 1000);
              });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.hide {
  padding: 20rpx 30rpx;

  .card {
    padding: 0 30rpx 33rpx;
    background-color: white;
    border-radius: 28rpx;

    .view {
      height: 104rpx;
      border-bottom: 2rpx solid rgba(245, 245, 245, 1);
      display: flex;
      align-items: center;
      color: #333333;
      font-size: 28rpx;

      image {
        width: 38rpx;
        height: 38rpx;
        margin-right: 12rpx;
      }
    }

    .textarea {
      padding: 20rpx;
      background-color: #f1f1f1;
      border-radius: 8rpx;
      height: 232rpx;

      textarea {
        height: 232rpx;
        font-size: 28rpx;
      }
    }

    .place {
      color: #a5a5a5;
      font-size: 28rpx;
    }
  }

  .tips {
    color: #333333;
    font-size: 28rpx;
    line-height: 40rpx;
    display: flex;
    flex-direction: column;
    margin-top: 40rpx;

    text {
      font-size: 26rpx;
    }
  }

  .btn {
    height: 86rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 36rpx;
    border-radius: 20rpx;
    margin-top: 120rpx;
    background-color: #1dd39b;
  }
}
</style>
